<template>
    <div id="ProjectList" v-if="visible">
        <a-modal :title="title" :visible="visible" :class="['common-dialog', className]" :width="width" :footer="footer" @cancel="closeModel">
            <a-row :gutter="16" style="margin-bottom:10px" >
                <a-col class="gutter-row" :span="6">
                    <a-input placeholder="项目名称" v-model="searchProject.name" @pressEnter="getList" />
                </a-col>
                <a-col class="gutter-row" :span="6">
                    <a-button type="primary" @click="getList" >查询</a-button>
                </a-col>
            </a-row>
            <DataTable :scroll="{x: null}" rowKey="ncProjectId"  :showConfig="false" :tableData="Data2" :tableColumn="tableColumn" :pageConfig="pageConfig" />
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class ProjectList extends Vue {
    @Prop({type: Boolean, default: false }) visible!: any
    @Prop({ type: String, default: '' }) title!: string
    @Prop({ type: String, default: '' }) className!: string
    @Prop({ type: String, default: '520px' }) width!: string
    @Prop({ type: Array, default: () => [] }) footer!: any[]
    @Prop({ type: Object, default: () => ({}) }) searchObj!: any // 传值

    Data2: any[] = [];
    searchProject:any={
        name: ''
    }
    tableColumn: any = {
        ncProjectId: {
        label: '项目编码',
        minWidth: 120
        },
        ncProjectName: {
        label: '项目名称',
        minWidth: 120,
        hidden: true
        },
        action: {
        label: '操作',
        width: 120,
        template: [
            {
            tag: 'a',
            text: '确定',
            callback: this.confirm
            }
        ]

        }
    };
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    };
    init () {
      this.getList()
    }
    confirm (val: any) {
        this.$emit('confirmProject', val)
    }
    closeModel () {
        this.$emit('cancel', false)
    }
    changePage (val: number) {
        this.pageConfig.current = val;
        this.getList();
    }
  getList () {
    const searchValue = this.searchProject.name
    const { current, pageSize } = this.pageConfig
    const data: any = {
        ...this.searchObj,
        page: searchValue ? 1 : current,
        size: pageSize,
        searchValue
    }
    this.$api.docInfoProjectListFetch(data).then((res: any) => {
      this.Data2 = res.data.records
      this.pageConfig.total = res.data.total;
      this.pageConfig.current = res.data.current;
    }).catch()
  }
}
</script>

<style lang="scss">

</style>
